<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>组件-2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">


    <javaboy title="组件1"></javaboy>
    <javaboy title="组件2"></javaboy>
    <!--<javaboy v-bind:title=""></javaboy>-->

    <!--<javaboy name='msg'></javaboy>-->
    <!--<div v-for="blog in blogs">-->
        <!--<myblog v-bind:title=""></myblog>-->
    <!--</div>-->
    <myblog @sayhello="hello" v-for="(blog,index) in blogs"
            v-bind:title="blog.title"
            v-bind:date="blog.date"
            v-bind:author="blog.author">
        <div>"******************************"</div>
    </myblog>

    <component :is="currentTabComponent"></component>
</div>


</body>


<script>
    Vue.component('javaboy', {
        data() {
            return {
                counter: 0
            }
        },
        props: ['title'],
        template: "<div><button v-on:click='counter++'>{{counter}}</button><div>{{title}}</div></div>"
        // template: "<button v-on:click='counter++'>{{counter}}</button><div>{{title}}</div>"
    });
    Vue.component('myblog', {
        props: ['title', 'date', 'author'],
        template: '<div>' +
            "<div>{{title}}</div>"+
            "<div>{{date}}</div>"+
            "<div>{{author}}"+
            "<br>=========="+
            "</div>"+
            // "<button v-on:click="$emit(\'sayhello\')"></button>"+
            "<slot></slot>"+
            '</div>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            blogs: [
                {
                    title: '标题一',
                    date: '2019-09-13',
                    author: "javaboy01"
                },
                {
                    title: '标题二',
                    date: '2019-09-14',
                    author: "javaboy02"
                },
                {
                    title: '标题三',
                    date: '2019-09-15',
                    author: "javaboy03"
                },
            ],
            currentTabComponent:''
        },
        methods:{
            hello() {
                alert("hello vue")
            }
        }
    })

</script>
</html>
